<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <canvas id="canvas" width="100" height="100"></canvas>
  <script src="./lib/index.js"></script>
  <script>
    const ctx = document.getElementById('canvas')
    const gl = ctx.getContext('webgl')
    
    // 顶点：是指二维三维空间的一个坐标，可以理解为一个个坐标
    // 顶点着色器
    // vec4(1.0, 0.0, 0.0, 1.0) x,Y,Z,W (X/W,Y/W,Z/W)
    const vertexShaderSource = `
      void main() {
        // 要绘制的点的坐标
        gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
       
        // 点的大小
        gl_PointSize = 10.0;
      }
    `
     // 片元着色器
    // vec4(1.0, 0.0, 0.0, 1.0) r,g,b,a
     const fragmentShaderSource = `
      void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
      }
     `
    
      const program = initShaders(gl, vertexShaderSource, fragmentShaderSource)

      gl.drawArrays(gl.POINTS, 0, 1)
  </script>
</body>
</html>